<template>
  <div class="index-container ec-container">
    <el-row :gutter="10" class="form">
      <el-col :span="6">
        <div class="grid-content">
          <span>渠道：</span>
          <el-select class="w60" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in channelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <span>平台：</span>
          <el-select class="w60" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in platformOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <span>店铺编码：</span>
          <el-input class="w60" v-model ="storeId" label-width="50"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <span>店铺名称：</span>
          <el-input class="w60" v-model ="storeName" label-width="50"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="info">
      <el-col :span="6">
        <div class="grid-content">
          <p class="title">当前可用积分</p>
          <p class="t_c">{{levelAvailablePoints}}</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <p class="title">累计获得积分</p>
          <p class="t_c">{{levelTotalPoints}}</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <p class="title">累计使用积分</p>
          <p class="t_c">{{levelUsedPoints}}</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <p class="title">人均可用积分</p>
          <p class="t_c">{{levelMemberAvgAvailablePoints}}</p>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="des">
      <el-col :span="12">
        <div class="grid-content">
          <p>* 数据更新频率：T+1；</p>
          <p>* 更新状态：截止昨天凌晨数据；</p>
          <p>* 会员等级与积分信息，取自最新状态数据；</p>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content">
          <p>* 该页面数据来源于会员忠诚度模块数据；</p>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <div id="ranks" class="grid-content"></div>
      </el-col>
      <el-col :span="12">
        <div id="grades" class="grid-content"></div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="10">
        <div id="points" class="grid-content"></div>
      </el-col>
      <el-col :span="14" class="system">
        <div class="text">
          <el-row :gutter="10">
            <el-col :span="10" class="mr">
              <div class="grid-content">
                <span>会员等级：</span>
                <el-select class="w50" v-model="levelId" placeholder="请设置会员等级" @change="getAvailablePointByGroup">
                  <el-option
                    v-for="item in levelOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="14">
              <div class="grid-content">“会员等级”只对【当前可用积分_分组】报表受影响，其他数值和报表不受该条件影响；</div>
            </el-col>
          </el-row>
        </div>
        <div id="current" class="grid-content current mt10"></div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="table">
      <el-col :span="24">
        <div class="grid-content">
          <p class="title">各等级会员_积分明细数据</p>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="levelId" label="会员等级" align="center" :formatter="levelFormatter"></el-table-column>
            <el-table-column prop="levelMemberNumber" label="会员数量" align="center"></el-table-column>
            <el-table-column prop="levelAvailablePoints" label="当前可用积分" align="center"></el-table-column>
            <el-table-column prop="levelMemberAvgAvailablePoints" label="人均可用积分" align="center"></el-table-column>
            <el-table-column prop="levelTotalPoints" label="累计获得积分" align="center"></el-table-column>
            <el-table-column prop="levelUsedPoints" label="累计使用积分" align="center"></el-table-column>
            <el-table-column prop="levelAvailablePoints" label="累计可用积分" align="center"></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "memberGrade",
  components: {},

  data() {
    return {
      value: "",
      stsDate: null,//统计日期
      levelId: null,
      tableData: [],

      //渠道下拉选项
      channelOptions: [
        {
          value:null,
          label:null,
        }
      ],
      //等级下拉选项
      levelOptions: [
        {
          value:1,
          label:'粉丝会员',
        },
        {
          value:2,
          label:'普通会员',
        },
        {
          value:3,
          label:'钻石会员',
        },
        {
          value:4,
          label:'超级钻石会员',
        },
      ],

      //平台下拉选项
      platformOptions: [
        {
          value:null,
          label:null,
        }
      ],
      storeId:null,//店铺ID
      storeName:null,//店铺ID
      channelId:null,//渠道ID
      platformId:null,//平台Id
      levelAvailablePoints:0,
      levelTotalPoints:0,//累计获取积分;
      levelUsedPoints:0,//累计使用积分;
      levelMemberAvgAvailablePoints:0,//人居可用积分;

      //会员数量统计:
      fansMemberNum:0,
      fansMemberPoint:0,
      normalMemberNum:0,
      normalMemberPoint:0,
      superDiamondMemberNum:0,
      superDiamondMemberPoint:0,
      diamondMemberNum:0,
      diamondMemberPoint:0,


      //各等级平均积分列表;
      avgLevelPointList:[],

      //当前可用积分-分组
      //注册时间查询
      less1000  :0,
      total1000To2000 :0,
      total2000To3000 :0,
      total3000To4000 :0,
      total4000To5000:0,
      total5000To6000:0,
      total6000To7000:0,
      total7000To8000:0,
      total8000To9000:0,
      total9000To10000:0,
      more10000:0,


    };
  },

  created(){
//    this.getStsDate();
  },

  mounted() {
    this.getDataOfMemberPoint(); // - 饼状图
    this.getDistributionOfMemberNumOfAllLevel();//个等级会员数量分布 - 饼状图
    this.getAvailablePointByGroup();//获取可用积分/分组 - 柱状图
    this.listAllChannel();//获取所有的渠道信息
    this.listAllPlatform();//获取所有的平台信息
  },

  methods: {


    /**
     * 获取统计日期
     */
    getStsDate(){
      let this_ = this;
      let nowDate = new Date();
      let year = nowDate.getFullYear();
      let month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)
        : nowDate.getMonth() + 1;
      let day = (nowDate.getDate() - 1) < 10 ? "0" + (nowDate.getDate()-1) : (nowDate.getDate() - 1);
      this_.stsDate = year + "-" + month + "-" + day;
    },

    // 商家状态转化
    levelFormatter: function (row, column, cellValue) {
      if (cellValue === 1) {
        return '粉丝会员'
      }
      else if (cellValue === 2) {
        return '普通会员'
      }
      else if (cellValue === 3) {
        return '钻石会员'
      }
      else if (cellValue === 4) {
        return '超级钻石会员'
      }
      else {
        return '无'
      }
    },

    /**
     * 当前可用积分/分组 - 柱状图
     */
    getAvailablePointByGroup(){
      let this_ = this;
      let param = {
        channelId:this_.channelId,
        storeId:this_.storeId,
        storeName:this_.storeName,
        platformId:this_.platformId,
        levelId:this_.levelId,
        status:1,
        deleteFlag:0,
        deptId:null,
        merchantId:null,
        id:null,
        stsDate: this_.stsDate,

      };
      this_.utils.request.getAvailablePointByGroup(param,res => {
        if (res !==null && res.code === '0000' && res.data !== null){
          this_.less1000 = (res.data.less1000);
          this_.total1000To1500 = (res.data.total1000To1500/10000);
          this_.total2000To3000 = (res.data.total2000To3000/10000);
          this_.total3000To4000 = (res.data.total3000To4000/10000);
          this_.total4000To5000 = (res.data.total4000To5000/10000);
          this_.total5000To6000 = (res.data.total5000To6000/10000);
          this_.total6000To7000 = (res.data.total6000To7000/10000);
          this_.total7000To8000 = (res.data.total7000To8000/10000);
          this_.total8000To9000 = (res.data.total8000To9000/10000);
          this_.total9000To10000 = (res.data.total9000To10000/10000);
          this_.more10000 = res.data.more10000/10000;
          this_.current();
        }else{
          this_.$message({message:'无法获取当前可用积分(分组)记录数' , type: 'error'})
        }
      });
    },


    /**
     * 获取会员积分基本信息
     */
    getDataOfMemberPoint(){
        let this_ = this;
        let param = {
          channelId:this_.channelId,
          storeId:this_.storeId,
          storeName:this_.storeName,
          platformId:this_.platformId,
          status:1,
          deleteFlag:0,
          deptId:null,
          merchantId:null,
          id:null,
          stsDate: this_.stsDate,
          createTimeStart:null,
        };
      this_.utils.request.getDataOfMemberPoint(param,res => {
          if (res !==null && res.code === '0000' && res.data !== null ){
            this_.levelAvailablePoints = res.data.levelAvailablePoints;
            this_.levelTotalPoints = res.data.levelTotalPoints;
            this_.levelUsedPoints = res.data.levelUsedPoints;
            this_.levelMemberAvgAvailablePoints = res.data.levelMemberAvgAvailablePoints;
          }else{
            this.$message({message:'没有获取到[会员积分详情]信息' , type: 'error'})
          }
        });
      },

    /**
     * 获取会员积分详情
     */
    getDistributionOfMemberNumOfAllLevel(){
      let this_ = this;
      let param = {
        channelId: this_.channelId,
        storeId: this_.storeId,
        storeName: this_.storeName,
        platformId: this_.platformId,
        status: 1,
        deleteFlag: 0,
        deptId: null,
        merchantId: null,
        id: null,
        stsDate: this_.stsDate,
        createTimeStart: null,
      };
      this_.utils.request.getDistributionOfMemberNumOfAllLevel(param, res => {
        if (res !== null && res.code === '0000' && res.data !== null && res.data.length > 0) {
            this_.tableData = res.data;
          let list = res.data;
          list.forEach(item => {
            if (item.levelId === 1) {
              this_.fansMemberNum = item.levelMemberNumber;
              this_.fansMemberPoint = item.levelAvailablePoints;
              this_.avgLevelPointList.push(item.levelMemberAvgAvailablePoints)
            }
            else if (item.levelId === 2) {
              this_.normalMemberNum = item.levelMemberNumber;
              this_.normalMemberPoint = item.levelAvailablePoints;
              this_.avgLevelPointList.push(item.levelMemberAvgAvailablePoints)
            }
            else if (item.levelId === 3) {
              this_.diamondMemberNum = item.levelMemberNumber;
              this_.diamondMemberPoint = item.levelAvailablePoints;
              this_.avgLevelPointList.push(item.levelMemberAvgAvailablePoints)
            }
            else if (item.levelId === 4) {
              this_.superDiamondMemberNum = item.levelMemberNumber;
              this_.superDiamondMemberPoint = item.levelAvailablePoints;
              this_.avgLevelPointList.push(item.levelMemberAvgAvailablePoints)
            }
          });
          this_.ranks();
          this_.grades();
          this_.points();
        } else {
          this_.$message({message: '没有获取到[会员积分详情]信息', type: 'error'})
        }
      });
    },

    // 各等级会员人数分布
    ranks() {
      let rank = document.getElementById("ranks");
      let rankWrap = this.$echarts.init(rank);
      let option = {
        title: {
          text: "各等级会员人数分布"
        },
        color: ["#f97e2c", "#29474d", "#b0d1b5", "#1ea084"],
        legend: {
          orient: "horizontal",
          data: ["粉丝会员", "普通会员", "demo钻石会员", "demo钻石II会员"],
          left: "center"
        },
        series: [
          {
            name: " ",
            type: "pie",
            radius: "65%",
            center: ["50%", "65%"],
            data: [
              { value: this.fansMemberNum, name: "粉丝会员" },
              { value: this.normalMemberNum, name: "普通会员" },
              { value: this.diamondMemberNum, name: "demo钻石会员" },
              { value: this.superDiamondMemberNum, name: "demo钻石II会员" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      rankWrap.setOption(option);
    },
    // 各等级会员人数分布
    grades() {
      let grade = document.getElementById("grades");
      let gradeWrap = this.$echarts.init(grade);
      let option = {
        title: {
          text: "各等级会员及积分分布"
        },
        color: ["#f97e2c", "#29474d", "#b0d1b5", "#1ea084"],
        legend: {
          orient: "horizontal",
          data: ["粉丝会员", "普通会员", "demo钻石会员", "demo钻石II会员"],
          left: "center"
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "65%"],
            data: [
              { value: this.fansMemberPoint, name: "粉丝会员" },
              { value: this.normalMemberPoint, name: "普通会员" },
              { value: this.superDiamondMemberPoint, name: "demo钻石会员" },
              { value: this.diamondMemberPoint, name: "demo钻石II会员" }
            ]
          }
        ]
      };
      gradeWrap.setOption(option);
    },
    // 各等级会员_人均可用积分
    points() {
      let points = document.getElementById("points");
      let pointsWrap = this.$echarts.init(points);
      let option = {
        title: {
          text: "各等级会员_人均可用积分"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["人均可用积分"],
          left: "center"
        },
        xAxis: { type: "value" },
        yAxis: {
          name: "",
          type: "category",
          data: ["粉丝会员", "普通会员", "demo钻石会员", "demo钻石II会员"],
          axisLabel: {
            interval: 0,
            rotate: 45 //代表逆时针旋转45度
          }
        },
        series: [
          {
            name: "人均可用积分",
            type: "bar",
            barHeight: 150,
            barWidth: 30,
            data: this.avgLevelPointList,
            color: "#1ea084"
          }
        ]
      };
      pointsWrap.setOption(option);
    },
    // 当前可用积分_分组
    current() {
      let current = document.getElementById("current");
      let currentWrap = this.$echarts.init(current);
      let option = {
        title: {
          text: "当前可用积分_分组"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["会员数"],
          left: "center"
        },
        xAxis: {
          name: "",
          type: "category",
          data: [
            "0-1000",
            "1000-1500",
            "2000-2500",
            "3000-3500",
            "4000-4500",
            "5000-5500",
            "6000-6500",
            "7000-7500",
            "8000-8500",
            "9000-9500",
            ">=10000"
          ],
          axisLabel: {
            interval: 0,
            rotate: 45 //代表逆时针旋转45度
          }
        },
        yAxis: [
          {
            type: "value",
            name: " ",
            min: 0,
            max: 150,
            position: "left",
            axisLabel: {
              formatter: "{value} 万"
            }
          }
        ],
        series: [
          {
            name: "会员数",
            type: "bar",
            barHeight: 150,
            barWidth: 30,
            data: [
              this.less1000,
              this.total1000To2000,
              this.total2000To3000,
              this.total3000To4000,
              this.total4000To5000,
              this.total5000To6000,
              this.total6000To7000,
              this.total7000To8000,
              this.total8000To9000,
              this.total9000To10000,
              this.more10000,
            ],
            color: "#1ea084"
          }
        ]
      };
      currentWrap.setOption(option);
    },
    /**
     * 查询所有渠道接口，用作下拉框
     */
    listAllChannel(){
      let this_ = this;
      let param = {
        channelId:this_.channelId,
        storeId:this_.storeId,
        storeName:this_.storeName,
        platformId:this_.platformId,
        status:1,
        deleteFlag:0,
        deptId:null,
        merchantId:null,
        id:null,
        stsDate: this_.stsDate,
        createTimeStart:null,
      };
      this.utils.request.listAllChannel(param,res => {
        if (res !==null && res.code === '0000' && res.data !== null && res.data.length>0 ){
          this.channelOptions = res.data;
        }else{
          this.$message({message:'没有获取到渠道信息' , type: 'error'})
        }
      });
    },
    /**
     * 查询所有渠道接口，用作下拉框
     */
    listAllPlatform(){
      let this_ = this;
      let param = {
        channelId:this_.channelId,
        storeId:this_.storeId,
        storeName:this_.storeName,
        platformId:this_.platformId,
        status:1,
        deleteFlag:0,
        deptId:null,
        merchantId:null,
        id:null,
        stsDate: this_.stsDate,
        createTime:null,
      };
      this.utils.request.listAllPlatform(param,res => {
        if (res !==null && res.code === '0000' && res.data !== null  && res.data.length>0 ){
          this.platformOptions = res.data;
        }else{
          this.$message({message:'没有获取到平台信息' , type: 'error'})
        }
      });
    },



  }
};
</script>
<style lang="scss" scoped>
 @import "../../../../assets/css/dataCenterEcharts.css";
.ec-container {
  .mr10 {
    margin: 0 10px 10px 0;
  }
  .info {
    .grid-content {
      height: 90px;
      .t_c {
        font-weight: bold;
        color: #333;
        font-size: 24px;
      }
    }
  }
  .des {
    .grid-content {
      height: 90px;
      line-height: 1;
    }
  }
  .system {
    .text {
      margin-bottom: 10px;
      .grid-content {
        height: 40px;
      }
    }
    .current {
      height: 410px;
    }
  }
}
</style>

